<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>贪吃蛇</title>
	<style type="text/css">
		body,div{
			margin: 0;padding: 0;
		}
		#main{
			width: 800px;height: 400px;margin:50px auto;
		}
		#map{
			width: 800px;height: 400px;background: url(img/grass.jpg);position: relative;
		}
		button{
			width: 100px;height: 40px;
		}

	</style>
</head>
<body>
<div id="main">
	<button id="btn">开始游戏</button>
	<div id="map"></div>
</div>
<script type="text/javascript">
var map = document.getElementById('map');
// 设计蛇
function Snake() {
	// 宽度 高度属性
	this.w = 20;
	this.h = 20;
	// 方向属性（默认向右）
	this.direction = 'right';
	// 身体属性，将来吃到食物之后，向这个属性里面添加
	this.body = [
		// 每一个元素就是一节蛇对象
		{x:2,y:0},//第一个元素就是蛇头,x属性保存距离x轴2个，y轴上0个
		{x:1,y:0},//第二个元素就是蛇脖子，距离x轴1个，y轴0个
		{x:0,y:0}//第三个元素，蛇的尾巴，距离x轴0个，y轴0个

	];
	// 根据位置显示蛇
	this.display = function () {
		for (var i = 0; i < this.body.length; i++) {
			// this.body[i];
			// 创建图像
			var oimg = document.createElement('img');
			oimg.src = 'img/snake.png';

			// 设置蛇的宽度，高度
			oimg.style.width = this.w + 'px';
			oimg.style.height = this.h + 'px';

			oimg.style.position = 'absolute';
			oimg.style.left = this.body[i].x * this.w+'px';
			oimg.style.top = this.body[i].y * this.h+'px';

			//将创建的img节点对象保存到当前元素属性上身上
			//便于将来找到他并删除
			this.body[i].flag = oimg;



       		// 确定蛇的位置
       		map.appendChild(oimg);

		}
	};
	// 让蛇跑起来
	this.run = function () {
		// 让蛇后面的元素等于前面元素的位置
		// 由于蛇头的位置取决于方向，所以蛇头我们单独处理
		for(var i=this.body.length-1;i>0;i--){
			this.body[i].x = this.body[i-1].x;
			this.body[i].y = this.body[i-1].y;
		}
		// 蛇头的位置取决于方向
		switch(this.direction){
			case 'right':
				this.body[0].x += 1;
				break;
			case 'left':
				this.body[0].x -= 1;
				break;
			case 'up':
				this.body[0].y -= 1;
				break;
			case 'down':
				this.body[0].y += 1;
				break;
		}

		// 判断蛇是否出界
		if (this.body[0].x<0||this.body[0].x>39||this.body[0].y<0||this.body[0].y>19) {
			clearInterval(timer);
			alert('游戏结束！');
			location.reload();
		}
		// 判断不能吃到自己
		for (var i = 4; i < this.body.length; i++) {
			if (this.body[0].x == this.body[i].x && this.body[0].y ==this.body[i].y) {
				clearInterval(timer);
				alert('傻逼！');
				location.reload();
			}
		}
		
		// console.log(food);
		// 先删除旧的蛇，再重新创建，保证body里面有3个
		for (var i = 0; i < this.body.length; i++) {
			// document.getElementById('map').removeChild(this.body[i].flag);
			if(this.body[i].flag != null){
				document.getElementById('map').removeChild(this.body[i].flag);
			}
		}
		this.display();

		// 判断是否吃到食物，保证X，Y轴的坐标重合
		if (this.body[0].x == food.x && this.body[0].y == food.y) {
			this.body.push({x:0,y:0,flag:null});
			// 食物消失，再重新生成
			// console.log(food);
			document.getElementById('map').removeChild(food.flag);
			food.display();
		}

	}
}
var snake = new Snake();
snake.display();

var timer;
document.getElementById('btn').onclick = function () {
	clearInterval(timer);
	timer = setInterval("snake.run()",500);
}
document.body.onkeydown = function (argument) {
	var ev = argument || window.event;
	switch(ev.keyCode){
		case 87:
			// 将方向设置为向上
			if (snake.direction != 'down') {
				snake.direction = 'up';
			}
			break;
		case 83:
			// 将方向设置为向下
			if (snake.direction != 'up') {
				snake.direction = 'down';
			}
			break;
		case 65:
			// 将方向设置为向左
			if (snake.direction != 'right') {
				snake.direction = 'left';
			}
			break;
		case 68:
			// 将方向设置为向右
			if (snake.direction != 'left') {
				snake.direction = 'right';
			}
			break;
	}
	
}
function Food() {
	this.w = 20;
	this.h = 20;
	this.display = function () {
		var oimg = document.createElement('img');
		oimg.src = 'img/food.png';
		this.flag = oimg;

		oimg.style.width = this.w+'px';
		oimg.style.height = this.h+'px';

		// 确定位置
		this.x = Math.floor(Math.random()*40);
		this.y = Math.floor(Math.random()*20);
		// console.log(Math.random());
		
		oimg.style.position = 'absolute';
		oimg.style.left = this.x*this.w+'px';
		oimg.style.top = this.y*this.h+'px';

		document.getElementById('map').appendChild(oimg);
	}
}
var food = new Food;
food.display();
</script>

</body>
</html>